<script setup lang="ts">
import '@/style/Homepage.css'
import {menu_name, menuItems, setActive, userData} from "@/static/Homepage/Homepage";

</script>

<template>
  <div class="homepage_all">

    <el-container>
      <!-- 侧边栏菜单 -->
      <el-aside width="30%" class="hp-aside">
        <div class="avatar_username">

          <div class="avatar_homepage">
            <!-- 用户头像 -->
            <el-avatar src="public/Default_avatar.png" :size="100"></el-avatar>
          </div>

          <div class="username_homepage">
            <!-- 用户昵称和绑定的邮箱 -->
            <span>{{ userData.username }}</span>
            <p>{{ userData?.email }}</p>
          </div>
        </div>

        <div class="info_menu">

          <div
            v-for="item in menuItems"
            :key="item.label"
            class="info_menu_item"
            :class="{'is-active': item.isActive}"
            @click="setActive(item)"
          >
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span :class="{'active-label': item.isActive}">{{ item.label }}</span>
          </div>
        </div>
      </el-aside>

      <el-container>
        <el-header>
          <div class="vertical_line"></div>
          <div class="menu_name">
            <p>{{ menu_name }}</p>
          </div>

        </el-header>

        <!-- 响应的信息 -->
        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>